<template>
    <div>
        <div class="e-table billList">
            <top-step :stepInfo="steps" />
            <div class="top">
                <div class="left">
                    <div>
                        <el-button
                            size="small"
                            style="background: #7aa818; color: #fff"
                            @click="goCtAdd"
                            >新增</el-button
                        >
                    </div>
                </div>
                <div class="right">
                    <div class="right-div1">
                        <el-input
                            placeholder=""
                            v-model="like"
                            size="small"
                            @keydown.enter.native="fuzzySearchEnter"
                            @blur="likeSearch"
                        >
                        <i slot="suffix" class="el-icon-search like" @click="likeSearch"></i>
                        </el-input>
                    </div>
                    <div>
                        <el-button
                            class="btn-blue"
                            @click="onAdvanceSearch"
                            >高级搜索</el-button
                        >
                    </div>
                </div>
            </div>
            <el-table
                ref="table"
                :data="tableData"
                border
                highlight-current-row
                class="table"
                height="0"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
            >
                <el-table-column v-if="permission(['edit'])" label="操作" fixed width="110" class-name="blue-column" show-overflow-tooltip>
                    <template slot-scope="{ row }" >
                        <div class="list_box">
                            <img src="@/assets/contract/sign.png" class="operation_icon"  @click="goSigningPage(row)" v-if="row.contractState === 2"  title="合同签订"/>
                            <img src="@/assets/contract/change.png" class="operation_icon" @click="goCtChangePage(row)" v-if="row.contractState === 4"  title="合同变更"/>
                            <img src="@/assets/contract/stop.png" class="operation_icon"  @click="goCtEndPage(row)" v-if="row.contractState === 2 || row.contractState === 4 || row.contractState === 6"  title="合同终止"/>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="合同编号" fixed width="250" class-name="blue-column" show-overflow-tooltip>
                    <template slot-scope="{ row }" >
                        <span @click="tableDbShow(row)">{{row.contractNumber}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="contractName" label="合同名称" min-width="200" class-name="blue-column" show-overflow-tooltip>
                    <template slot-scope="{ row }" >
                        <span @click="tableDbShow(row)">{{row.contractName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="supplier" label="供应商" min-width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="orgName" label="所属机构" min-width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="originalContractAmount" label="原始合同金额(元)" width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="contractAmount" label="合同金额(元)" width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="taxExcludedAmount" label="不含税金额(元)" width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="cumulativeSettlementAmount" label="结算金额" width="120" class-name="blue-column" show-overflow-tooltip>
                    <template slot-scope="{ row }" >
                        <span @click="showSettlementList(row)" v-if="row.cumulativeSettlementAmount != 0">{{row.cumulativeSettlementAmount}}</span>
                        <span v-else>{{row.cumulativeSettlementAmount}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="bondAmount" label="应交履约保证金（元）" width="170" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="unWriteOffAdvanceCharge" label="预付款未冲销(元)" width="170" show-overflow-tooltip>
                </el-table-column>
                 <el-table-column prop="signingDate" label="签订日期" width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="contractState" label="合同状态" class-name="blue-column" width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <ToolHistory v-if="options.stateArrClass.audit.includes(scope.row.contractState)" :key="scope.$index" url="/subcontract/audit/getAuditHistory" :billId="showPage(scope.row,false).billId" :billType="showPage(scope.row,false).billType">
                            <span  @click="showPage(scope.row)" v-status="{ value: scope.row.contractState,statusObj:options.stateArrClass }">
                                {{options.stateArr[scope.row.contractState]}}
                            </span>
                        </ToolHistory>
                        <span v-else @click="showPage(scope.row)" v-status="{ value: scope.row.contractState,statusObj:options.stateArrClass }">
                                {{options.stateArr[scope.row.contractState]}}
                         </span>
                    </template>
                </el-table-column>
            </el-table>
            <ComPagination
                :total="totalPage"
                :pageSize.sync="pagination.limit"
                :currentPage.sync="pagination.page"
                @currentChange="contractListByEntity"
                @sizeChange="contractListByEntity"
                class="bottomSetting"
            />
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import ComPagination from '@/components/pagination/pagination'
import { vueDom, debounce, getUrlParams, advanceSearch } from '@/utils/common.js'
import TopStep from '@/components/topstep/topstep.vue'
import auditRequest from '@/api/subcontractApi/audit.js'
import ctMaterialPurchaseApply from '@/api/balanceContractApi/ctMaterialPurchaseApi/ctMaterialPurchaseApply.js'
import { showSettlementList, showPage } from '@/pages/subcontract/common/contractCom.js'
export default {
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            like: '', //模糊查询
            queryForm: {  //高级查询
                Organization: '',
                bName: '',
                ctMoney1: null,
                ctMoney2: null,
                ctName: '',
                ctType: null,
                endTime: '',
                key: '',
                limit: 5,
                page: 1,
                startTime: '',
                state: null
            },
            dialogVisible: false,
            dialogFormVisible: false,
            steps: [
                {
                    description: '合同申请',
                },
                {
                    description: '合同签订',
                },
                {
                    description: '合同变更申请',
                },
                {
                    description: '合同变更签订',
                },
                {
                    description: '合同终止',
                }
            ],
            tableData: [], //表格数据
            srcollDome: '',
            pagination: {
                'advanced': {
                    'collaborativeTeam': '',
                    'contractName': '',
                    'contractContext': '',
                    'contractNumber': '',
                    'contractState': [],
                    'contractTypeIds': [],
                    'orgIds': [ localStorage.getItem('searchOrgId') ],
                    'signingEndDate': '',
                    'signingStartDate': ''
                },
                'limit': 20,
                'page': 1
            },
            totalPage: 0, //总页数
            tableHeight: 0,
            fn: null,
            pageJson: {
                apply: { editPage: '/ctMaterialApplyEditHV', showPage: '/ctMaterialApplyShowHV', billType: 7024 },
                sign: { editPage: '/ctFormalSigningEditHV', showPage: '/ctFormalSigningShowHV', billType: 7025 },
                changeApply: { editPage: '/ctChangesMaterialApplyEditHV', showPage: '/ctChangesMaterialApplyShowHV', billType: 7026 },
                changeSign: { editPage: '/ctSupplementSigningEditHV', showPage: '/ctSupplementSigningShowHV', billType: 7027 },
                stop: { editPage: '/ctEndContractEditHV', showPage: '/ctEndContractShowHV', billType: 7028 },
            }
        }
    },
    created () {
        this.getContractSubHome()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 230
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 230
        }
        window.onresize = debounce(this.fn)
        if(getUrlParams('menuid')) {
            this.setMenuid(getUrlParams('menuid'))
        }
    },
    computed: {
        ...mapState({
            options: state => state.contract.ctClassify,
            state: state => state.equip.equipData.state, //通用流程状态
            financialSharingList: state => state.contract.ctClassify.financialSharingList, //传输财务共享
        })
    },
    components: {
        ComPagination,
        TopStep
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        ...mapMutations(
            'contract', ['setMenuid']
        ),
        batchOperation () {
            this.isBatch = !this.isBatch
            if(this.isBatch) {
                this.batch = '退出批量管理'
                this.$refs.table.clearSelection()
            }else{
                this.batch = '进入批量管理'
            }
        },
        //获取合同拟定列表
        getContractSubHome () {
            ctMaterialPurchaseApply.queryStandingBook(this.pagination).then(res => {
                this.tableData = res.list
                this.totalPage = res.totalCount
            })
        },
        //分页查询
        contractListByEntity () {
            this.getContractSubHome()
        },
        // eslint-disable-next-line no-unused-vars
        // formatter (row, column, cellValue, index) {
        //     if (column.label === '合同状态') {
        //         return this.options.stateForm.map((item, index) => {
        //             if (index === cellValue) {
        //                 return item
        //             }
        //         })
        //     }
        // },
        //去新增合同页面
        goCtAdd () {
            this.$router.push('/ctMaterialApplyAddHV')
        },
        //双击单元格去查看页面
        tableDbShow (row) {
            const billid = row.billId
            const auditParams = {
                'billId': billid,
                'billType': 7024
            }
            if(row.state === -1 || row.state === 2 || row.state === 5 || !this.permission(['edit'])) {
                this.$router.push({
                    path: '/ctMaterialApplyShowHV',
                    query: { billid: row.billId }
                })
            }else{
                auditRequest.getUnitInfoByBillId(auditParams).then(res => {
                    if(res.canModify) {
                        this.$router.push({
                            path: '/ctMaterialApplyEditHV',
                            query: { billid: row.billId }
                        })
                    }else{
                        this.$router.push({
                            path: '/ctMaterialApplyShowHV',
                            query: { billid: row.billId }
                        })
                    }
                })
            }
        },
        //点击去编辑页面
        tableDbEdit (billid) {
            this.$router.push({
                path: '/ctMaterialApplyEditHV',
                query: { billid }
            })
        },
        //回车键查询
        fuzzySearchEnter (e) {
            if(e.keyCode == 13) {
                console.log(e.keyCode)
                this.likeSearch()
            }
        },
        //模糊查询
        likeSearch () {
            this.pagination.key = this.like
            this.getContractSubHome()
        },
        //高级查询
        onAdvanceSearch () {
            advanceSearch('/projectContractSearch')
                .then(res => {
                    this.pagination.advanced = res
                    this.getContractSubHome()
                })
        },
        //去合同签订页面
        goSigningPage (row) {
            this.$router.push({
                path: '/ctFormalSigningAddHV',
                query: { billid: row.billId }
            })
        },
        //去合同变更页面
        goCtChangePage (row) {
            const billid = row.billId
            console.log('billid', billid)
            this.$router.push({
                path: '/ctChangesMaterialApplyAddHV',
                query: { billid }
            })
        },
        //去合同终止页面
        goCtEndPage (row) {
            const billid = row.billId
            this.$router.push({
                path: '/ctEndContractAddHV',
                query: { billid, originalBillId: billid, sourceState: row.contractState  }
            })
        },
        //跳转到结算台账列表
        showSettlementList (row) {
            showSettlementList(row.billId, '/ctMaterialApplyShowHV', this)
        },
        //根据合同状态跳转到对应页面
        showPage (row, jump = true) {
            if(jump) {
                showPage(row, this.pageJson, this, jump)
            }else{
                const billInfo = showPage(row, this.pageJson, this, jump)
                return billInfo
            }

        },
    },
}
</script>

<style lang="scss" scoped>

#iconEdit:hover{
    color: blue;
}
.like{
    color: rgb(46,97,215);
    font-size: 17px;
    line-height: 30px;
    cursor: pointer;
}
.tabOperation{
    margin: 0 5px;
}
.dialog-footer {
    text-align: right;
}
</style>
